大家在作分页时，多数是在后台返回一个导航条的html字符串，其实在前端用js也很好实现。

调用pager方法，输入参数，会返回一个导航条的html字符串。方法的内部比较简单。

1 /** 2 * pageSize,  每页显示数 3 * pageIndex, 当前页数   4 * pageCount  总页数 5 * url  连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize, pageIndex, pageCount, url) { 9     var intPage = 7;  //数字显示10     var intBeginPage = 0;//开始的页数11     var intEndPage = 0;//结束的页数12     var intCrossPage = parseInt(intPage / 2); //显示的数字13 14     var strPage = "
     
      第 " + pageIndex + "/" + pageCount + " 页 每页 " + pageSize + " 条";15 16     if (pageIndex > 1) {17         strPage = strPage + "
      首页 ";18         strPage = strPage + "
      上一页 ";19     }20     if (pageCount > intPage) {
   //总页数大于在页面显示的页数21 22         if (pageIndex > pageCount - intCrossPage) {
   //当前页数>总页数-323             intBeginPage = pageCount - intPage + 1;24             intEndPage = pageCount;25         }26         else {27             if (pageIndex <= intPage - intCrossPage) {28                 intBeginPage = 1;29                 intEndPage = intPage;30             }31             else {32                 intBeginPage = pageIndex - intCrossPage;33                 intEndPage = pageIndex + intCrossPage;34             }35         }36     } else {37         intBeginPage = 1;38         intEndPage = pageCount;39     }40 41     if (pageCount > 0) {42         for (var i = intBeginPage; i <= intEndPage; i++) {43             {44                 if (i == pageIndex) {
   //当前页45                     strPage = strPage + " 
      " + i + " ";46                 }47                 else {48                     strPage = strPage + " 
      " + i + " ";49                 }50             }51         }52     }53 54 55     if (pageIndex < pageCount) {56         strPage = strPage + "
      下一页 ";57         strPage = strPage + "
      尾页 ";58     }59     return strPage+"
     
";60 61 }

 

试用这个方法试试

1   2   3   4     
       5       6       7       8      78  79  80     
     
       81         
        82             
         83                 
 84                 
 85                 
 86                 
 87                 
 88                 
 89                 
 90                 
 91                 
 92                 
 93                 
 94             
 95         
 96         
 97     
      
       
        
CustomerID
        
CompanyName
        
ContactName
        
ContactTitle
        
Address
        
City
        
Region
        
PostalCode
        
Country
        
Phone
        
Fax
       
      
      
     
 98     
     
 99 100 

看下效果

列有点多，我只截图了部分，界面好丑，加点样式，用bootstrap来美化下

使用Nuget安装bootstrap

加上样式后

虽说不是特别漂亮，但还是对得起观众吧。

代码下载

如果觉得对你有帮助，请点个赞，谢谢！

不足与错误之处，敬请批评指正！